<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    {include file='common/head' /}
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form ajax_post" action="{$_self_}">
            <div class="layui-form-item">
                <label for="nickname" class="layui-form-label">
                    <span class="x-red">*</span>用户昵称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="nickname" name="nick_name" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{$info['nick_name']|default=''}">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>必填
                </div>
            </div>
            <div class="layui-form-item">
                <label for="phone" class="layui-form-label">
                    <span class="x-red">*</span>绑定手机号
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="phone" name="phone_number" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{$info['phone_number']|default=''}">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>必填
                </div>
            </div>
<!--            <div class="layui-form-item" {if !isset($info['id'])}style="display:none"{/if}>-->
<!--                <label for="used_pwd" class="layui-form-label">-->
<!--                    <span class="x-red">*</span>原密码-->
<!--                </label>-->
<!--                <div class="layui-input-inline">-->
<!--                    <input type="password"  name="used_pwd" id="used_pwd"-->
<!--                           autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--                <div class="layui-form-mid layui-word-aux">-->
<!--                    6到16个字符-->
<!--                </div>-->
<!--            </div>-->
            <div class="layui-form-item">
                <label for="L_pass" class="layui-form-label">
                    <span class="x-red">*</span>{if isset($info['id'])}新{/if}密码
                </label>
                <div class="layui-input-inline">
                    <input type="password" id="L_pass" name="password" required="" lay-verify="pass"
                           autocomplete="off" class="layui-input" value="{$info['password']|default=''}" >
                </div>
                <div class="layui-form-mid layui-word-aux">
                    6到16个字符
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                    <span class="x-red">*</span>确认密码
                </label>
                <div class="layui-input-inline">
                    <input type="password" id="L_repass" name="used_pwd" required="" lay-verify="repass"
                           autocomplete="off" class="layui-input" value="{$info['password']|default=''}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="describe" class="layui-form-label">
                    描述</label>
                <div class="layui-input-inline" id="describe">
                    <input type="text" class="layui-input" value="{$info['describe']|default=''}" name="describe">
                </div>
            </div>
            <input type="hidden" name="avater" id="avater" value="{$info['avater']|default=''}">
            <div class="layui-upload">
                <label for="L_repass" class="layui-form-label"></label>
                <button type="button" class="layui-btn" id="test1" name="image" style="margin-right: 50px">上传图片</button>
                <button class="layui-btn" lay-filter="add" lay-submit="">提交</button>
                <div class="layui-upload-list">
                    <label for="L_repass" class="layui-form-label">预览图:</label>
                    <img class="layui-upload-img" id="demo1" style="width: 150px;height: 150px;margin: 0 10px 10px 0">
                    <p id="demoText"></p>
                </div>
            </div>
<!--                <div class="layui-form-item">-->
<!--                    <button  class="layui-btn" lay-filter="add" lay-submit="">-->
<!--                        确认-->
<!--                    </button>-->
<!--                </div>-->
        </form>
    </div>
</div>
<script src="__STATIC__/js/jquery-2.1.4.min.js"></script>
<script src="__STATIC__/js/common.js"></script>
<script>layui.use(['form', 'layer','upload'],
    function() {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;
            upload = layui.upload;

        //自定义验证规则
        form.verify({
            name: function(value) {
                if (value.length < 2 || value > 10) {
                    return '昵称长度在2~16字符之间';
                }
            },
            pass: [/(.+){6,16}$/, '密码必须6到16位'],
            repass: function(value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            },
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,field: 'image'
            ,url: '/index.php/admin/user/uploadHeadImg' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg(res.msg);
                }
                //上传成功
                $('#avater').attr('value',res.data);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


        var img = $('#avater').val();//imgurl 就是你的图片路径
        function getBase64Image(img) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
            var dataURL = canvas.toDataURL("image/"+ext);
            return dataURL;
        }
        if (img !== ''){
            var image = new Image();
            image.src = img;
            image.onload = function(){
                var base64 = getBase64Image(image);
                $('#demo1').attr('src', base64);
            }
        }

    });
</script>
</body>

</html>
